/* =========================================================
   Mustang Sally — Generic, Reusable Stylesheet
   Clean base + ONE mobile block (max-width: 700px)
   ========================================================= */

/* ---------- Fonts ---------- */

@font-face {
    font-family: "VinerHandITC";
    src: url("fonts/VINERITC.TTF") format("truetype");
    font-weight: normal;
    font-style: normal;
}

/* ---------- Base layout & typography (DESKTOP DEFAULT) ---------- */

body,
.MustangSallyBody {
    font-size: 18px;
    line-height: 1.6;
    margin: 0;
    padding: 0;
}


/* constrain page content under header */
.page-content {
    max-width: 700px;
    margin: 0 auto;
    padding: 0 1.5rem 2rem;
}

/* center images used as standalone content */
.bottom-image {
    display: block;
    margin: 0 auto;
}

/* ---------- Header, title, tagline ---------- */

.site-header {
    max-width: 960px;
    margin: 0 auto;
    padding: 1rem 1.5rem 0.5rem;
}

.site-header-inner {
    position: relative; /* anchor for absolute hamburger */
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    padding-right: 3.2rem; /* NEW: reserve room for hamburger */
}



/* Left/right logos */
.site-logo img {
    display: block;
}

/* Title + tagline block */
.site-title h1 {
    margin: 0;
    font-size: clamp(2.2rem, 3vw + 1rem, 3.2rem);
    font-family: "VinerHandITC", cursive;
    flex: 1;
    min-width: 0;
}

}

.site-tagline {
    margin: 0.25rem 0 0;
    font-family: Verdana, Arial, sans-serif;
    font-size: 0.9rem;
    font-style: italic;
}

/* ---------- Track map (world route image) ---------- */

.track-map {
    display: flex;
    justify-content: center;
    margin: 1rem 0 2rem;
}

.track-map img {
    display: block;
    max-width: 100%;
    height: auto;
}

/* ---------- Navigation bar & hamburger ---------- */

/* Navigation bar (desktop default): hidden until hamburger toggles open */
.main-nav {
    margin-top: 0.75rem;
    padding-top: 0.5rem;
    border-top: 1px solid #c0c0c0;
    display: none; /* NEW */
}

    /* open state (desktop + mobile) */
    .main-nav.open {
        display: block;
    }


.main-nav ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    justify-content: center;
}

/* Individual menu items / links */
.main-nav a {
    display: inline-block;
    padding: 0.25rem 0.9rem;
    font-family: Verdana, Arial, sans-serif;
    font-size: 0.85rem;
    font-style: italic;
    font-weight: bold;
    text-decoration: none;
    border-radius: 4px;
    background-color: #8AA5CE;
    color: #ffffff;
}

/* Hover / focus states */
.main-nav a:hover,
.main-nav a:focus {
    background-color: #6f88aa;
}

/* Hamburger button (shown on desktop + mobile; positioned so layout doesn't shift) */
.menu-toggle {
    display: block;
    position: absolute;
    right: 0.75rem;
    top: 46px; /* desktop: aligns near tagline line; tweak if needed */
    font-size: 1.6rem;
    border: 1px solid #666;
    background: #f0f0f0;
    cursor: pointer;
    padding: 0.15rem 0.45rem; /* smaller click target than before */
    line-height: 1;
    border-radius: 4px;
}

/* ---------- Voyages page styles (special but generic) ---------- */

.page-title {
    text-align: center;
    margin: 1.5rem 0 1rem;
}

/* Voyages table layout */
.voyages-table {
    width: 100%;
    max-width: 960px;
    margin: 0 auto 3rem;
    border-collapse: separate;
    border-spacing: 0 1rem;
}

.voyages-table tr {
    background-color: rgba(0, 0, 0, 0.02);
}

.voyages-table td {
    padding: 0.4rem 0.75rem;
    vertical-align: top;
}

.voyage-date,
.voyage-title,
.voyage-desc {
    line-height: 1.5;
    vertical-align: top;
}

.voyage-date,
.voyage-title {
    font-weight: 600;
}

.voyage-date {
    width: 8rem;
    white-space: nowrap;
}

.voyage-title {
    width: 14rem;
}

/* ---------- Generic TABLE → FLEX layout for converted content ---------- */

/* Wrapper for groups of converted rows (from one original table) */
.content-group {
    max-width: 700px;
    margin: 2rem auto;
}

/* Each former table row that had structure (1–2 cells) */
.flex-row.content-row {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 1.5rem;
    max-width: 960px;       /* nice reading width */
    margin: 1.2rem auto;    /* centered on page */
}

/* Former table cell */
.content-cell {
    flex: 1 1 200px;
}

/* Optional roles */
.content-image {
    text-align: center;
}

.content-text {
    /* inherits normal text styles */
}

/* Simple full-width blocks (1-cell no-image rows) */
.content-block {
    max-width: 700px;
    margin: 1rem auto;
}

/* Variants for semantics / subtle alignment tweaks */
.centered-text {
    text-align: center;
}

/* inside a centered block, keep paragraphs readable */
.centered-text p,
.centered-text li {
    text-align: left;
}

.image-only {
    text-align: center;
}

/* ---------- Global image & table safety ---------- */

img {
    max-width: 100%;
    height: auto;
}

table {
    max-width: 100%;
    width: 100%;
}

/* Legacy floated images: add breathing room between image and text */
img[align="left"] {
    margin-right: 0.75em;   /* ~one character */
    margin-bottom: 0.5em;
}

img[align="right"] {
    margin-left: 0.75em;    /* ~one character */
    margin-bottom: 0.5em;
}

/* Baja link (leave !important as it solves an issue) */
a.baja-link {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 10px !important;
    text-decoration: none;
}

a.baja-link .baja-text {
    text-align: center;
    line-height: 1.3;
    max-width: 40ch;
}

a.baja-link .baja-image {
    display: block;
}


.content-block,
.content-text {
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
}

/* Desktop: spacing only */
img[style*="float:left"], img[style*="float: left"] { margin: 0.2em 0.9em 0.6em 0; }
img[style*="float:right"], img[style*="float: right"] { margin: 0.2em 0 0.6em 0.9em; }

@media (min-width: 701px) {
    .site-header-inner {
        flex-wrap: nowrap;
    }
}




/* =========================================================
   MOBILE OVERRIDES (ONE BLOCK)
   ========================================================= */

@media (max-width: 700px) {

    /* Reduce header clutter on small screens */
    .site-logo-right {
        display: none;
    }

    /* Hamburger + nav behavior (mobile) */
    .menu-toggle {
        display: block;
        position: absolute;
        right: 8px;
        top: 8px; /* mobile: upper right */
        font-size: 1.2rem; /* smaller hamburger */
        padding: 0.1rem 0.35rem;
        margin: 0; /* override old margin */
    }

    .main-nav {
        display: none;
        width: 100%;
    }

        .main-nav.open {
            display: block;
        }

        /* dropdown list layout */
        .main-nav ul {
            flex-direction: column;
            align-items: center;
        }

        /* IMPORTANT: buttons only as wide as text */
        .main-nav li {
            width: auto; /* changed from 100% */
            text-align: center;
        }

        .main-nav a {
            display: inline-block; /* changed from block */
            width: auto; /* changed from 100% */
            padding: 0.55rem 0.9rem;
        }


    /* Header layout: keep title/logo centered; hamburger floats top-right */
    .site-header-inner {
        position: relative; /* keep anchor */
        flex-direction: column;
        justify-content: center;
        align-items: center;
        text-align: center;
        padding-right: 3rem; /* reserve space for hamburger */
    }


    .site-logo img {
        margin: 0 auto;
    }

    /* Mobile typography & padding */
    body,
    .MustangSallyBody {
        font-size: 20px;
        line-height: 1.7;
        overflow-x: hidden;
    }

    .page-content,
    .content-group {
        padding: 0 0.75rem 2rem;
    }

    p,
    li {
        font-size: 1.05rem;
    }

    /* Converted table layouts: stack */
    .flex-row.content-row {
        flex-direction: column;
        align-items: center;
        text-align: left;
        margin: 0.8rem auto;
    }

    .content-cell {
        width: 100%;
    }

    .content-block {
        max-width: 100%;
    }

    /* Voyages table becomes stacked cards */
    .voyages-table,
    .voyages-table tbody,
    .voyages-table tr,
    .voyages-table td {
        display: block;
        width: 100%;
    }

    .voyages-table tr {
        margin-bottom: 1.2rem;
        padding-bottom: 0.8rem;
        border-bottom: 1px solid #ddd;
    }

    .voyage-date,
    .voyage-title,
    .voyage-desc {
        width: auto;
    }

    .voyage-date {
        font-weight: bold;
    }

    .voyage-title {
        margin-top: 0.2rem;
        font-weight: bold;
    }

    .voyage-desc {
        margin-top: 0.3rem;
    }

    /* On phones, stacked images read better than wrap-around floats */
    img[align="left"],
    img[align="right"] {
        float: none;
        display: block;
        margin: 0.75em auto;
    }
}